import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,Select,Switch,Popconfirm,Radio,DatePicker }from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';
const {RangePicker} = DatePicker;
const {TextArea} = Input;
const dateFormat = 'YYYY-MM-DD';


export default class ExecuteChargeModal extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
          executeContent:{

          }
        };
    }
    onOk(){
      let {visibility,onSubmitExecuteCharge} = this.props;
      let {executeContent} = this.state;
      onSubmitExecuteCharge(executeContent);
    }
    onCancel(){
      let {onCancelExecuteChargeModal} = this.props;
      this.setState({
        executeContent:{},
      })
      onCancelExecuteChargeModal();
    }

    onDateChange(date,dateString){
      let {executeContent} = this.state;
      executeContent.date = dateString;
      this.setState({
        executeContent,
      })
    }

    onChargeChange(value){
      let {executeContent} = this.state;
      executeContent.charge = value;
      this.setState({executeContent});
    }


    
    render() {
      let {visibility} = this.props;
      let {executeContent} = this.state;

        return (
                  <Modal
                    title="执行费用"
                    visible={visibility}
                    onOk= {this.onOk.bind(this)}
                    onCancel={this.onCancel.bind(this)}
                    okText="确定"
                    cancelText="取消"
                  >

                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>费用类型：</Col>
                        <Col span={16}>
                          <Select
                            placeholder=""
                            style={{"width":"100%"}}
                            onChange={this.onChargeChange.bind(this)}
                            value = {executeContent.type ? this.executeContent.type : '0'}

                          >
                            <Select.Option value="0">利息费用</Select.Option>
                            <Select.Option value="1">催收费用</Select.Option>
                          </Select>
                            
                        </Col>

                    </Row>

                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>费用日期：</Col>
                        <Col span={16}>
                          <DatePicker
                            
                            style={{"width":"100%"}}
                            onChange={this.onDateChange.bind(this)}
                            value = {executeContent.type ? moment(executeContent.date,dateFormat) : moment('2018-03-16',dateFormat)}

                          >
                          </DatePicker>
                            
                        </Col>

                    </Row>


                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>费用金额：</Col>
                        <Col span={15}>
                          <Input
                            style = {{width:"90%"}}
                            {...this::bind_change('executeContent.cost')}
                          />
                          <span className="marginL10">元</span>
                        </Col>
                        {/*<Col span={0.01} style={{lineHeight:"30px"}}>元</Col>*/}
                    </Row>
                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>备注：</Col>
                        <Col span={16}>
                          <TextArea
                            rows={4}
                            {...this::bind_change('executeContent.remark')}
                          />
                        </Col>
                    </Row>
                    <Row gutter={24} className="marginT10">
                      <Col span={6} className='text-right' style={{lineHeight:"30px"}}>费用凭证：</Col>
                      <Col span={16}>
                        
                      </Col>
                    </Row>
                    

                  </Modal>
               
        );
    }

    
}
ExecuteChargeModal.contextTypes= { router: React.PropTypes.object.isRequired};
